<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'movable-view'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="page-section-title first">movable-view区域小于movable-area</onekit-view>
			<onekit-movable-area>
				<onekit-movable-view :x="x" :y="y" direction="all">text</onekit-movable-view>
			</onekit-movable-area>
		</onekit-view>
		<onekit-view onekit-class="btn-area">
			<onekit-button onekit-class="page-body-button" type="primary" @Tap="tap">点击移动到 (30px, 30px)</onekit-button>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="page-section-title">movable-view区域大于movable-area</onekit-view>
			<onekit-movable-area>
				<onekit-movable-view onekit-class="max" direction="all">text</onekit-movable-view>
			</onekit-movable-area>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="page-section-title">只可以横向移动</onekit-view>
			<onekit-movable-area>
				<onekit-movable-view direction="horizontal">text</onekit-movable-view>
			</onekit-movable-area>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="page-section-title">只可以纵向移动</onekit-view>
			<onekit-movable-area>
				<onekit-movable-view direction="vertical">text</onekit-movable-view>
			</onekit-movable-area>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="page-section-title">可超出边界</onekit-view>
			<onekit-movable-area>
				<onekit-movable-view direction="all" out-of-bounds>text</onekit-movable-view>
			</onekit-movable-area>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="page-section-title">带有惯性</onekit-view>
			<onekit-movable-area>
				<onekit-movable-view direction="all" inertia>text</onekit-movable-view>
			</onekit-movable-area>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="page-section-title">可放缩</onekit-view>
			<onekit-movable-area scale-area>
				<onekit-movable-view direction="all" scale scale-min="0.5" scale-max="4" :scale-value="scale" @Change="onChange" @Scale="onScale">text</onekit-movable-view>
			</onekit-movable-area>
		</onekit-view>
		<onekit-view onekit-class="btn-area">
			<onekit-button onekit-class="page-body-button" type="primary" @Tap="tap2">点击放大3倍</onekit-button>
		</onekit-view>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../../page/common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../../page/common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "movable-view",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../../weixin2vue/wx.js';
import Macro from '../../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../../weixin2vue/OnekitComponent.js';
export default Page(ONEKIT_JSON,["x","y","scale"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'movable-view',
        "path":'page/component/pages/movable-view/movable-view'
};
    },
    "data":{
        "x":0,
        "y":0,
        "scale":2
},
    "tap"(){
      this.setData({
        "x":30,
        "y":30
});
    },
    "tap2"(){
      this.setData({
        "scale":3
});
    },
    "onChange"(e){
      console.log(e.detail);
    },
    "onScale"(e){
      console.log(e.detail);
    }
});

</script>
<style 
 lang="css">
.onekit-movable-view {
  display: flex ;
  align-items: center ;
  justify-content: center ;
  height: 50px ;
  width: 50px ;
  background: #1AAD19 ;
  color: #fff ;
}
.onekit-movable-area {
  height: 200px ;
  width: 200px ;
  margin: 25px 0px 0 25px ;
  background-color: #ccc ;
  overflow: hidden ;
}
.max {
  width: 300px ;
  height: 300px ;
}
.page-section {
  width: 100% ;
  margin-bottom: 10px ;
}
.page-section-title {
  margin-top: 25px ;
  font-size: 14px ;
  color: #999999 ;
  margin-bottom: 5px ;
  padding-left: 15px ;
  padding-right: 15px ;
}
.page-section-title.first {
  margin-top: 0 ;
}
.btn-area {
  margin-top: 10px ;
}
</style>